<template>
  <div class="dashboard-container">
    <div class="dashboard-text" style="font-size: 48px;color: #f01456;display: inline-block">商城系统</div>
    <div style="display: inline-block;margin-left: 40px">
      <el-button type="text" style="font-size: 24px;margin-left: 20px" @click="selectByType('服装')">服装</el-button>
      <el-button type="text" style="font-size: 24px;margin-left: 20px" @click="selectByType('电器')">电器</el-button>
      <el-button type="text" style="font-size: 24px;margin-left: 20px" @click="selectByType('日用品')">日用品
      </el-button>
      <el-button type="text" style="font-size: 24px;margin-left: 20px" @click="selectByType('食品')">食品</el-button>
      <el-button type="text" style="font-size: 24px;margin-left: 20px" @click="selectByType('玩具')">玩具</el-button>
      <el-button type="text" style="font-size: 24px;margin-left: 20px" @click="selectByType('珠宝礼品')">珠宝礼品
      </el-button>
      <el-button type="text" style="font-size: 24px;margin-left: 20px" @click="selectByType('数字产品')">数字产品
      </el-button>
      <el-input placeholder="商品名称" v-model="commodityName" clearable style="width: 200px;margin-left: 40px"/>
      <el-button type="primary" @click="selectAll" style="width: 100px;margin-left: 20px">查询</el-button>
      <el-button @click="check" style="width: 100px;margin-left: 20px">重置</el-button>
    </div>
    <div style="overflow-y: auto;height: 790px" v-if="commodityList.length != 0">
      <div style="margin-left: 20px;margin-right:20px;margin-top: 20px;height: 300px">
        <el-carousel height="300px" type="card">
          <el-carousel-item v-for="item in commodityList" :key="item">
            <el-image style="height: 300px" :src="require ('C:/upload/' + item.imageMain)"/>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div style="margin-left: 40px;margin-right:40px;margin-top: 20px;height: 450px">
        <div v-for="commodity in commodityList" class="block" :key="commodityList"
             style="display: inline-block;cursor: pointer;border-color: #0ec725;border-width: 1px;border-style: solid;margin-left: 5px;margin-top: 5px"
             @click="viewDetails(commodity)"
        >
          <div style="display: inline-block">
            <el-image fit="cover" style="width: 150px;height: 200px;margin-top: 20px;margin-left: 40px;
          vertical-align: top" :src="require ('C:/upload/' + commodity.imageMain)"
            />
            <div style="display: inline-block;width: 170px;height: 200px;margin-left: 10px;margin-top: 20px;">
              <span style="font-size:12px;margin-top:5px;display: block">商品名称：</span>
              <span style="font-size:20px;margin-top:5px;margin-left:20px;display: block">{{
                  commodity.commodityName
                }}</span>
              <span style="font-size:12px;margin-top:10px;display: block">价格：</span>
              <span style="font-size:16px;margin-top:5px;margin-left:20px;display: block;color: #0049ff">￥ {{
                  commodity.price
                }} 元</span>
              <span style="font-size:12px;margin-top:10px;display: block">库存数量：</span>
              <span style="font-size:16px;margin-top:5px;margin-left:20px;display: block;color: #ff0000"
              >{{ commodity.number }} 件</span>
              <span style="font-size:12px;margin-top:10px;display: block">简介：</span>
              <span style="font-size:12px;margin-top:5px;margin-left:20px;display: block;
            max-width: 150px;text-overflow: ellipsis; overflow: hidden;white-space: nowrap; "
              >{{ commodity.synopsis }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else style="height: 770px">
      <h1>暂无数据!</h1>
    </div>

    <div style="margin-left: 40px;margin-right:40px;margin-top: 20px;height: 15px;text-align: center">
      <footer>
        <section class="bei">
          <p style="font-size: 12px">&copy;xxxxxxxxxxxxxxx &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;备案/许可证编号
            县10P备20060148</p>
        </section>
      </footer>
    </div>

    <el-dialog :title="this.title" width="40%" :visible.sync="viewDetailsController" @close="closeDialog()">
      <div>
        <el-image fit="cover" style="width: 250px;height: 250px;margin-left: 40px;
          vertical-align: top" :src="this.images"
        />
        <div style="display: inline-block;width: 40%;height: 250px;margin-left: 10px;margin-top: 20px;
        "
        >
          <span style="font-size:20px;margin-top:5px;display: block">商品名称：</span>
          <span
            style="font-size:30px;margin-top:5px;margin-left:20px;display: block;border-color: #0049ff;border-width: 1px;border-style: solid;"
          >{{ commodity.commodityName }}</span>
          <span style="font-size:18px;margin-top:10px;display: block;">价格：</span>
          <span
            style="font-size:22px;margin-top:5px;margin-left:20px;display: block;border-color: #0049ff;border-width: 1px;
            border-style: solid;color: #0049ff"
          >￥ {{ commodity.price }} 元</span>
          <span style="font-size:18px;margin-top:10px;display: block">库存数量：</span>
          <span
            style="font-size:22px;margin-top:5px;margin-left:20px;display: block;border-color: #0049ff;border-width: 1px;
            border-style: solid;color: #ff0000"
          >{{ commodity.number }} 件</span>
          <span style="font-size:18px;margin-top:10px;display: block">商品发货地：</span>
          <span
            style="font-size:22px;margin-top:5px;margin-left:20px;display: block;border-color: #0049ff;border-width: 1px;border-style: solid;"
          >{{ commodity.locality }}</span>
        </div>
        <div style="border-color: #0049ff;border-width: 1px;border-style: solid;margin-top: 20px">
          <span style="font-size:24px;margin-top:5px;margin-left:5px;display: block">简介：</span>
          <span style="font-size:18px;margin-top:5px;margin-left:20px;display: block;
            max-width: 80%;text-overflow: ellipsis; overflow: hidden;white-space: nowrap; "
          >{{ commodity.synopsis }}</span>
        </div>

      </div>

      <div style="overflow-y: scroll;height: 200px"
           v-if="this.commodity.imageOther != null && this.commodity.imageOther != ''"
      >
        <div style="margin-left: 20px;margin-right:20px;margin-top: 20px;height: 300px">
          <el-carousel height="200px" type="card">
            <el-carousel-item v-for="item in this.commodity.imageOther" :key="item">
              <el-image style="height: 200px" :src="require ('C:/upload/' + item)"/>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <span v-if="this.role == '用户'" style="font-size:20px;margin-right: 20px;margin-bottom: 10px;display: block"
        >合计价格：￥{{ commodity.price * this.number }}  元</span>
        <el-input-number v-if="this.role == '用户'" v-model="number" :min="1" :max="commodity.number" show-word-limit
                         style="width: 35%;margin-right: 20px"
                         clearable
                         placeholder="请输入需要购买的数量"
        />
          <el-button v-if="this.role == '用户'" type="primary" @click="addShopping()">添加至购物车</el-button>
          <el-button @click="closeDialog()">取消</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { addHeat, queryAllCommodity } from '@/api/commodity'
import { insertShoppingCart } from '@/api/shoppingCart'

export default {
  name: 'dashboard',
  computed: { ...mapGetters(['userId', 'name', 'role']) },
  // 存放页面参数
  data() {
    return {
      commodityName: '',
      type: '',
      typeList: [
        { value: '服装', label: '服装' },
        { value: '电器', label: '电器' },
        { value: '日用品', label: '日用品' },
        { value: '食品', label: '食品' },
        { value: '玩具', label: '玩具' },
        { value: '珠宝礼品', label: '珠宝礼品' },
        { value: '数字产品', label: '数字产品' }
      ],
      commodityList: [],
      viewDetailsController: false,
      commodity: {},
      title: '',
      number: '',
      commodityId: '',
      images: ''
    }
  },
  // 页面初始化加载的方法
  mounted() {
    this.selectAll()
  },
  // 页面的方法和事件
  methods: {
    viewDetails(row) {
      this.viewDetailsController = true
      this.commodity = row
      this.title = '查看商品详情'
      this.commodityId = row.commodityId
      this.number = ''
      this.images = require('C:/upload/' + this.commodity.imageMain)
      addHeat({ commodityId: row.commodityId })
    },
    selectByType(type) {
      this.type = type
      this.selectAll()
    },
    selectAll() {
      queryAllCommodity({
        commodityName: this.commodityName,
        type: this.type,
        state: '上架中'
      }).then(
        response => {
          this.commodityList = response.data
          this.commodityList.find(item => {
            if (item.imageOther != null && item.imageOther != '') {
              item.imageOther = item.imageOther.split(';')
            }
          })
        }
      )
    },
    check() {
      this.commodityName = ''
      this.type = ''
      this.selectAll()
    },
    closeDialog() {
      this.viewDetailsController = false
    },
    addShopping() {
      insertShoppingCart({
        userId: this.userId,
        commodityId: this.commodityId,
        number: this.number
      }).then(
        re => {
          this.$message.success('添加成功')
          this.viewDetailsController = false
          this.selectAll()
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
